const { Select, Form, Table, Button, Modal } = antd;

const weeks = '一二三四五六七';
const columns = [
    {
        title: '教师',
        key: ['teacher', 'no'],
        dataIndex: ['teacher', 'name'],
    },
    {
        title: '课程名',
        key: ['course', 'id'],
        dataIndex: ['course', 'name'],
    },
    {
        title: '教室',
        render: (_, record) => {
            return (
                <span>
                    {record.classroom.name}@{record.classroom.position}
                </span>
            );
        },
    },
    {
        title: '上课时间',
        render: (_, record) => {
            return (
                <span>
                    第{record.week}周 星期{weeks[record.day - 1]} 第{record.section}节
                </span>
            );
        },
    },
];

function Load() {
    const [form] = Form.useForm();

    const { loading: loadingOfTeacherList, data: teacherList = [] } = useRequest(
        () => {
            return new Promise(resolve => {
                request
                    .get('/teacher/teacherList')
                    .then(res => {
                        console.log(res);
                        resolve(Array.isArray(res) ? res : []);
                    })
                    .catch(err => {
                        resolve([]);
                        message.error(err.message);
                        console.log(err);
                    });
            });
        },
        {
            manual: false,
        }
    );
    const { loading: loadingOfClassList, data: classList = [] } = useRequest(
        () => {
            return new Promise(resolve => {
                request
                    .get('/class/classList')
                    .then(res => {
                        console.log(res);
                        resolve(Array.isArray(res) ? res : []);
                    })
                    .catch(err => {
                        resolve([]);
                        message.error(err.message);
                        console.log(err);
                    });
            });
        },
        {
            manual: false,
        }
    );
    const { loading: loadingOfCourseList, data: courseList = [] } = useRequest(
        () => {
            return new Promise(resolve => {
                request
                    .get('/course/courseList')
                    .then(res => {
                        console.log(res);
                        resolve(Array.isArray(res) ? res : []);
                    })
                    .catch(err => {
                        resolve([]);
                        message.error(err.message);
                        console.log(err);
                    });
            });
        },
        {
            manual: false,
        }
    );
    const { loading: loadingOfClassRoomList, data: classRoomList = [] } = useRequest(
        () => {
            return new Promise(resolve => {
                request
                    .get('/classroom/classroomList')
                    .then(res => {
                        resolve(Array.isArray(res) ? res : []);
                    })
                    .catch(err => {
                        resolve([]);
                        message.error(err.message);
                        console.log(err);
                    });
            });
        },
        {
            manual: false,
        }
    );

    const {
        loading: addScheduleLoading,
        run: fetchScheduleList,
        data: scheduleList,
    } = useRequest(
        values => {
            return new Promise(resolve => {
                request
                    .get(
                        `/classSchedule/schedule?${qs.stringify({
                            ...values,
                        })}`
                    )
                    .then(res => {
                        resolve(Array.isArray(res) ? res : []);
                    })
                    .catch(err => {
                        resolve([]);
                        message.error(err.message);
                        console.log(err);
                    });
            });
        },
        {
            manual: true,
        }
    );

    const { loading: loadingByDelete, run: deleteSchedule } = useRequest(id => {
        new Promise(resolve => {
            Modal.confirm({
                okText: '删除',
                content: '确定要删除该节课程吗',
                onOk: () => resolve(true),
                okCancel: () => resolve(false),
            });
        }).then(continued => {
            if (!continued) {
                return;
            }
            request
                .get('/classSchedule/deleteSchedule', {
                    params: {
                        id: id,
                    },
                })
                .then(res => {
                    if (typeof res === 'boolean') {
                        if (res) {
                            fetchScheduleList(form.getFieldsValue(true));
                            message.success('删除成功');
                        } else {
                            message.error('删除失败');
                        }
                    } else {
                        message.error('服务器错误');
                    }
                })
                .catch(err => {
                    message.error('服务器错误');
                });
        });
    });

    const newColumns = columns.concat({
        title: '操作',
        render: (_, record) => {
            return (
                <React.Fragment>
                    <Button
                        onClick={() => {
                            location.href = `${prefix}/classSchedule/modify?id=${record.id}`;
                        }}>
                        修改
                    </Button>
                    <Button
                        onClick={() => {
                            deleteSchedule(record.id);
                        }}>
                        删除
                    </Button>
                </React.Fragment>
            );
        },
    });

    return (
        <div style={{ display: 'flex', flexDirection: 'column', justifyContext: 'center', alignItems: 'center' }}>
            <Form
                form={form}
                onFinish={values => {
                    fetchScheduleList(values);
                }}
                layout='vertical'
                style={{ width: 300 }}>
                <Form.Item label='教师' name='teacherId' rules={[required('请输入教师')]}>
                    <Select>
                        {teacherList.map(item => (
                            <Select.Option key={item.no} value={item.no}>
                                {item.name}
                            </Select.Option>
                        ))}
                    </Select>
                </Form.Item>
                <Form.Item label='课程' name='courseId' rules={[required('请输入课程')]}>
                    <Select>
                        {courseList.map(item => (
                            <Select.Option key={item.id} value={item.id}>
                                {item.name}
                            </Select.Option>
                        ))}
                    </Select>
                </Form.Item>
                <Form.Item label='班级' name='classId' rules={[required('请输入班级')]}>
                    <Select>
                        {classList.map(item => (
                            <Select.Option key={item.id} value={item.id}>
                                {item.id}
                            </Select.Option>
                        ))}
                    </Select>
                </Form.Item>
                <Form.Item>
                    <Button type='primary' htmlType='submit'>
                        查询
                    </Button>
                </Form.Item>
            </Form>
            <Table loading={loadingByDelete} style={{ width: 800 }} columns={newColumns} dataSource={scheduleList}></Table>
        </div>
    );
}
